import React, { useEffect, useRef } from 'react'
import './swiperCart.scss'
import { EyeFilled, HeartOutlined } from '@ant-design/icons'
import SwiperIndex from '@/component/Homes/Main/Index/SwiperCart/CartChildren/SwiperIndex/SwiperIndex'


function SwiperCart(props) {
    let {item} = props;
    return (
        <div className='Swiper-Cart' style={{ width: '184px', marginRight: '24px' }}>
            <div className='mall-revision-card'>
                {/* 右上角收藏  */}
                <div className='eqx-pv-love'>
                    <div className='mall-tooltip'>
                        <HeartOutlined />
                    </div>
                </div>

                {/* ------返回 Children 渲染数据----- */}
                {
                    React.Children.map(props.children, (child, index) => {
                        return child;
                    })
                }

                {/* 会员免费用 */}
                <div className='card-use-tag'><span>{item.svip ? '会员免费用' : '免费'}</span></div>


                {/* 底部隐藏部分  */}
                <div className='eqx-card-info' >
                    <div className='eqx-title'>{item.title}</div>

                    <div className='eqx-avatar'>
                        {/* 头像 */}
                        <a href="" className='eqx-showker'>
                            <img src={item.useImage} alt="" />
                            <span>{item.useName}</span>
                        </a>

                        {/* 用户查看数量 */}
                        <div className='eqx-pv'>
                            <i className='eqf-eye-f'><EyeFilled /></i>
                            <span>{item.showNum}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default SwiperCart
